
<template>
  <!-- 预览编辑页面 -->
  <div class="editor__preview">
    <div class="h100 w100" style="overflow: hidden">
      <el-scrollbar :class="[
          componentList &&
          componentList.length == 1 &&
          componentList[0].value == 'NavBar'
            ? 'preNavBar'
            : '',
        ]" style="height: 100%" :noresize="true" ref="myScrollbar">
        <draggable v-model="componentList" :sort="true" :group="iscomponentList ? 'nocomponent' : 'component'"
          animation="500" :scroll="true" @add="componentAdd" @end="chengList">
          <transition-group>
            <div v-for="(component, i) of componentList" :key="i + 1" @click="handleCurrentComponent(component, i)"
              @mouseover="delFlag = i" @mouseleave="delFlag = -1" :id="`editor-preview-com-${i}`" style="width: 375px"
              :class="[
                'component--item',
                component.value != undefined &&
                delFlag === i &&
                component.value !== 'SpellPage' &&
                component.value !== 'BusinessSuper'
                  ? 'iscur__component--item'
                  : '',
                curreentFlag === i &&
                component.value !== 'SpellPage' &&
                component.value !== 'BusinessSuper'
                  ? 'select__component--item'
                  : '',
              ]">
              <div class="component--item__tan" v-show="
                  activePageType !== 'bussiness' &&
                  delFlag === i &&
                  component.value !== 'SpellPage' &&
                  component.value !== 'BusinessSuper'
                ">
                <div class="component--item__text" @click="handleCurrentComponent(component, i)">
                  编辑
                </div>
                <i class="el-icon-delete component--item__icon" @click="delCurrentCom(i)"></i>
              </div>
              <div class="component--item__draghelp" v-show="delFlag === i">
                <i class="el-icon-rank"></i>
              </div>
              <component :is="component.value" :formData="component.formData"></component>
            </div>
          </transition-group>
        </draggable>
      </el-scrollbar>
    </div>
  </div>
</template>

<script lang="ts">
import { IComponent } from "./interfaces/component";

import {
  Vue,
  Component,
  PropSync,
  Emit,
  Watch,
  Ref,
} from "vue-property-decorator";
import preview from "./compontents/index/preview";

import draggable from "vuedraggable";
import EdtiorFormData from "./compontents/index/formModel";

@Component({
  components: {
    ...preview,
    draggable,
  },
})
export default class DecorationPreview extends Vue {
  @PropSync("components", {
    type: Array,
    default() {
      return [];
    },
  })
  temComponentList: IComponent[];

  componentList = [];

  iscomponentList = false;

  delFlag = -1;

  // 拖动的组件的下角标
  dragStarIndex = -1;

  // 选中的当前项
  curreentFlag = -1;

  visible = false;

  // 获取当前页面操作栏目
  get activePageType() {
    return this.$store.state.decoration.activePageType;
  }

  @Ref() myScrollbar!: any;

  /**
   * 获取是否是本地直播组件
   */
  get liveItem() {
    return this.$store.state.decoration.liveItem;
  }

  @Watch("components", { deep: true })
  componentsChange(v) {
    console.log("v", v);
    if (Array.isArray(v) && v.length === 1) {
      const name = v[0].value;
      // 如果是拼团分类页要默认选中
      if (name === "SpellPage" || name === "BusinessSuper") {
        this.handleCurrentComponent(v[0], 0);
      }
    }
    this.componentList = v;
    if (this.liveItem.name) {
      this.componentList = this.liveItem.components;
    }
    if (
      this.componentList.length > 0 &&
      (this.componentList[0].value === "SpellPage" ||
        this.componentList[0].value === "BusinessSuper")
    ) {
      this.iscomponentList = true;
    } else {
      this.iscomponentList = false;
    }
  }

  mounted() {
    this.componentList = [...this.temComponentList];
    this.onWrapSroll();
  }

  componentAdd(e: any) {
    console.log("添加中");
    const index = e.newDraggableIndex;
    const com = this.componentList[index];
    const FormData = EdtiorFormData[com.value];
    console.log("com", com);
    console.log("FormData", FormData);
    this.$emit(
      "addchange",
      {
        ...com,
        id: Date.now(),
        formData: new FormData(),
      },
      index,
    );
    this.chengList();
  }

  @Emit("chengList")
  chengList() {
    return this.componentList;
  }

  /**
   * 监听组件设置切换
   */
  @Emit("change")
  handleCurrentComponent(currentComponent: IComponent, i: number): IComponent {
    this.curreentFlag = i;
    this.$store.commit("decoration/SET_ACTIVECOMINDEX", i);
    console.log("设置切换", currentComponent);
    return currentComponent;
  }

  onWrapSroll() {
    const scrollbarEl = this.myScrollbar.wrap;
    scrollbarEl.onscroll = function () {
      if (document.querySelector(".el-popover")) {
        document.querySelector(".el-popover").remove();
      }
    };
  }

  /**
   * 去除错误提示
   */
  onDelTpi() {
    if (document.querySelector(".el-popover")) {
      document.querySelector(".el-popover").remove();
    }
  }

  /**
   * 删除当前组件
   */
  @Emit("settingEmpty")
  delCurrentCom(i) {
    this.onDelTpi();
    this.componentList.splice(i, 1);
  }

  /**
   * 设置当前选中的组件
   */
  setCurrentFlag(i) {
    this.curreentFlag = i;
  }

  /**
   * 开始拖动，记录拖动的组件下角标
   */
  handleDragstart(i) {
    this.dragStarIndex = i;
  }

  /**
   * 阻止默认行为，否则drop事件不会触发
   */
  handleDragover(e) {
    e.preventDefault();
  }

  /**
   * 被放置的容器触发事件，交换两个组件的位置
   */
  handleDrop(i) {
    if (this.dragStarIndex === i) {
      return false;
    }
    const temp = this.componentList[this.dragStarIndex];
    this.componentList[this.dragStarIndex] = this.componentList[i];
    this.componentList[i] = temp;
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/decoration/editorPage";
</style>
